<template>
	<view class="index">
		<view class="header" >
			<view class="header-container" @click="toInfo">
				<view class="avatar" >
					<!-- <image class='image_s' v-if="" :src="userInfo.avatar" mode="aspectFill"></image> -->
					<image class='image_s' src="https://project.huaxinjiafu.com/prod/uploadfile/20250205/745570957833424896.png"
						mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="phone">
						<view class="name">{{'神秘用户'}}</view>
						<view class="name" style="margin-left:10rpx;" >
							13703333333
						</view>						
						<!-- <view class="name" style="margin-left:10rpx;" v-if="userInfo.mobile">
							{{userInfo.mobile.substr(0,3)+'****'+userInfo.mobile.substr(7)}}
						</view> -->
					</view>					
					<view class="jiantou">
						<u-icon name="arrow-right" size="40rpx"></u-icon>
					</view>
				</view>
			</view>
		
			<!-- <view class="header-bg">
				<view class="msg" @click="navigateTo('./message')">
					<image class='msg-img' src="https://project.huaxinjiafu.com/prod/uploadfile/20250205/745574234054619137.png" mode="widthFix"></image>
					<view class="mas-view" >10</view>
				</view>
			</view> -->
		</view>
		
		<view style="height: 40rpx;"></view>
		
		<view class="menu-list">
			<view class="item" v-for="(item,index) in menuList" :key="index" @click="navigateTo(item.url)">
				<view class="l">
					<image class='menu-list-img' :src="item.icon" mode="widthFix"></image>
					<text>{{item.name}}</text>
				</view>
				<u-icon name="arrow-right" color="#07133B"></u-icon>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				isVip: 1,
				menuList:[
					{ name: '功能室预约历史记录', icon: 'https://project.huaxinjiafu.com/prod/uploadfile/20250205/745574788013129729.png', url: '/pages/activity/my/publish' },
					{ name: '大讲堂预约历史记录', icon: 'https://project.huaxinjiafu.com/prod/uploadfile/20250205/745574787950211072.png', url: '/pages/activity/my/join' },
					{ name: '服务记录', icon: 'https://project.huaxinjiafu.com/prod/uploadfile/20250205/745600591589453824.png', url: '/pages/activity/my/coupon' }				
				]
			}
		},
		onLoad() {
			
		},
		onShow() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#dcf4ff',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
		},
		methods:{
			toInfo(){
				uni.navigateTo({
					url: '/pages/my/info'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header-bg {
		position: absolute;
		top: 0rpx;
		right: 0rpx;
	
		// width: 30rpx;
		// height: 30rpx;
		.msg {
			position: absolute;
			top: 40rpx;
			right: 60rpx;
	
			.msg-img {
				width: 36rpx;
			}
	
			.mas-view {
				position: absolute;
				top: -14rpx;
				right: -12rpx;
				width: 15px;
				height: 15px;
				line-height: 15px;
				background: #EE291F;
				font-size: 24rpx;
				text-align: center;
				color: #fff;
				border-radius: 50%;
			}
		}
	}
	.header {
		position: relative;
		width: 100%;
		background-size: 100% 110%;
		border-radius: 20rpx;
		height: 320rpx;
		background-image: url(https://project.huaxinjiafu.com/prod/uploadfile/20250205/745574480922963968.png);
		.header-container {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			height: 200rpx;
			padding: 0rpx 50rpx;
		}
	
		.info {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	
		.phone {}
		.jiantou{
			// margin-right: 30rpx;
		}
		.icon-quanyi {
			margin-top: 10rpx;
			width: 200rpx
		}
	
		.avatar {
			overflow: hidden;
			width: 120rpx;
			height: 120rpx;
			margin-right: 28rpx;
			border-radius: 50%;
	
			.image_s {
				width: 100%;
				height: 100%;
			}
		}
	
		.name {
			margin-bottom: 10rpx;
			font-size: 30rpx;
			font-weight: 700;
			color: #07133B;
		}
	
		.diamond {
			position: absolute;
			right: 20rpx;
			width: 145rpx;
		}
	}
	
	.menu-list {
		padding: 0rpx 30rpx;
	
		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			width: 100%;
			height: 120rpx;
			padding: 0 28rpx;
			font-size: 32rpx;
			color: #07133B;
			margin-bottom: 20rpx;
			box-shadow: 0px 3rpx 7rpx 0px rgba(0, 0, 0, 0.05);
			border-radius: 20rpx;
			background-color: white;
	
			.l {
				display: flex;
				align-items: center;
	
				.menu-list-img {
					width: 42rpx;
					margin-right: 18rpx
				}
			}
		}
	}
	
</style>